<template>
	<view class="baoming">
		<uni-nav-bar statusBar backgroundColor="#1E234B" color="#fff" title="">

		</uni-nav-bar>
		<view class="flex-page">
			<div class="baoming1">{{ isEdit ? '编辑名片' : '查看名片' }}</div>
			<!-- <div class="baoming2" v-if="isEdit">
				<div class="span">参加产业对接会将开启建联，您的名片将展示给他人，<br />同时您也可查看他人名片</div>
			</div> -->
			<!-- <div class="baoming3">
				<div class="right-edit" @click="editFn" v-if="isEdit">
					<image class="icon" src="https://static.inclusionconf.com/static/images/chat/edit-icon.png" mode="widthFix"></image>
					<view class="text">编辑</view>
				</div>
				<div class="baoming3-top">
					<image class="img" :src="detail.avatarUrl" mode="" mode="aspectFit"></image>
					<div class="name">{{ detail.personName }}</div>
					<div class="position">{{ detail['positionValue' + En] }}</div>
				</div>
				<div class="list">
					<div class="item">
						<div class="left">公司</div>
						<div class="right">{{ detail.companyName }}</div>
					</div>
					<div class="item">
						<div class="left">行业</div>
						<div class="right">{{ detail['industryValue' + En] }}</div>
					</div>
				</div>
				<div class="baoming3-bottom" v-if="detail.showDirection == 'yes' && detail.fieldDirectionList && detail.fieldDirectionList.length">
					
					<view class="baoming3-bottom-item" v-for="(item, index) in detail.fieldDirectionList" :key="index">
						· {{ item['name' + En] }} ·
					</view>
				</div>
			</div> -->
			<div class="baoming3">
				<div class="baoming3-top">
					<image class="img" src="https://static.inclusionconf.com/other/2024-08-29/10e4e685fa77436ea09a815e17402710.jpg" mode="" mode="aspectFit"></image>
					<div class="baoming3-top-title">您的“在线交流”名片</div>
					<div class="name">{{ detail.personName }}</div>
					<div class="position">{{ detail.positionValue }}</div>
				</div>
				<div class="company">{{ detail.companyName }}</div>
				<div class="list">
					<div class="item">
						<div class="left">行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</div>
						<div class="right">{{ detail.industryValue }}</div>
					</div>
					<div class="item" v-if="showDirection == 'yes'">
						<div class="left">参会目的</div>
						<div class="right" v-if="detail.fieldDirection">
							<div class="right-item" v-for="(item, index) in detail.fieldDirectionList" :key="index">{{ item['name' + En] }}</div>
						</div>
					</div>
				</div>
				<image class="edit" @click="editFn" src="https://static.inclusionconf.com/static/images/chat/edit-icon.png" mode="widthFix"></image>
			</div>
			<div class="baoming4" v-if="isEdit">在线交流功能</div>
			<div class="baoming5" v-if="isEdit">
				<div class="btn" @click="openFn" :class="detail.openExchange == 'yes' ? 'active' : ''">开启</div>
				<div class="btn" @click="closeFn" :class="detail.openExchange == 'no' ? 'active' : ''">关闭</div>
			</div>
		</view>
		<uni-drawer ref="drawer" mode="bottom" :mask-click="false" :width="750" height="230px">
			<template #top>
				<view class="drawer-top">
					提示
				</view>
				<view class="drawer-bottom">
					退出商业对接会后将无法进行在线交流。<br />确认退出？
				</view>
				<view class="btns">
					<div class="btn" @click="closeDraw">关闭</div>
					<div class="btn on" @click="cancelBusiness">确定</div>
				</view>
			</template>

		</uni-drawer>
	</view>
</template>

<script>
	import protal from '@/api/protal.js'

	export default {
		data() {
			return {
				detail: {},
				isEdit: false,
				uuid: ''
			}
		},
		onLoad(options) {
			this.uuid = options.uuid
		},
		onShow() {
			if (this.uuid) {
				this.isEdit = false
				this.businesscarddetailById(this.uuid)
			} else {
				this.isEdit = true
				this.businesscarddetail()
			}
		},
		methods: {
			openFn() {
				protal.businesscardupdateExchangeStatus('yes').then(res => {
					if (res.code == '0000') {
						this.detail.openExchange = 'yes'
					}
				})
			},
			closeFn() {
				this.$refs.drawer.open()
			},
			closeDraw() {
				this.$refs.drawer.close()
			},
			businesscarddetailById(uuid) {
				protal.businesscarddetailById(uuid).then(res => {
					this.detail = res.data
				})
			},
			businesscarddetail() {
				protal.businesscarddetail().then(res => {
					this.detail = res.data
				})
			},
			cancelBusiness() {
				protal.businesscardupdateExchangeStatus('no').then(res => {
					if (res.code == '0000') {
						this.closeDraw()
						this.detail.openExchange = 'no'
					}
				})
			},
			editFn() {
				uni.navigateTo({
					url: '/pages/business/card?update=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.baoming {
		min-height: 100vh;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		background: url(https://static.inclusionconf.com/static/images/chat/card-bg-new-t1.jpg) no-repeat;
		background-size: 100% 100%;
		background-color: #8E6AFF;

		.baoming1 {
			padding-top: 40px;
			font-family: inClusionFont;
			font-size: 26px;
			color: #FFFFFF;
			line-height: 26px;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-bottom: 75px;
		}

		.baoming2 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 16px 0 0;

			.img {
				width: 20px;
				height: 20px;
				margin-right: 6px;
			}

			.span {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 14px;
				color: rgba(255, 255, 255, 0.8);
				line-height: 20px;
				text-align: center;
				font-style: normal;
			}
		}

		// .baoming3 {
		// 	width: 670rpx;
		// 	background: #1E234B;
		// 	border-radius: 12px;
		// 	margin: 50px auto 0;
		// 	position: relative;
			
		// 	.right-edit {
		// 		position: absolute;
		// 		right: 20px;
		// 		top: 20px;
		// 		z-index: 1;
				
		// 		.icon {
		// 			width: 14px;
		// 			display: block;
		// 			margin: 0 auto 2px;
		// 		}
				
		// 		.text {
		// 			font-family: AlibabaPuHuiTi_3_45_Light;
		// 			font-size: 13px;
		// 			color: #FFFFFF;
		// 			line-height: 19px;
		// 			text-align: center;
		// 			font-style: normal;
		// 		}
		// 	}

		// 	.baoming3-top {
		// 		position: relative;
		// 		padding: 38px 0 0 114px;

		// 		.img {
		// 			position: absolute;
		// 			left: 20px;
		// 			top: 30px;
		// 			width: 74px;
		// 			height: 74px;
		// 			border-radius: 10px;
		// 			border: 2px solid #fff;
		// 			box-sizing: border-box;
		// 		}

		// 		.name {
		// 			font-family: AlibabaPuHuiTi_3_75_SemiBold;
		// 			font-size: 20px;
		// 			color: #FFFFFF;
		// 			line-height: 20px;
		// 			text-align: left;
		// 			font-style: normal;
		// 		}

		// 		.position {
		// 			margin-top: 16px;
		// 			font-family: AlibabaPuHuiTi_3_45_Light;
		// 			font-size: 13px;
		// 			color: #FFFFFF;
		// 			line-height: 13px;
		// 			text-align: left;
		// 			font-style: normal;
		// 			padding-bottom: 9px;
		// 			position: relative;

		// 			&::after {
		// 				content: "";
		// 				position: absolute;
		// 				left: 0;
		// 				bottom: 0;
		// 				width: 20px;
		// 				height: 2px;
		// 				background: #7C5CFF;
		// 			}
		// 		}
		// 	}

		// 	.list {
		// 		padding-top: 55px;
		// 		padding-bottom: 14px;

		// 		.item {
		// 			width: 590rpx;
		// 			margin: 0 auto;
		// 			display: flex;
		// 			justify-content: space-between;
		// 			margin-bottom: 14px;

		// 			.left {
		// 				font-family: AlibabaPuHuiTi_3_65_Medium;
		// 				font-size: 14px;
		// 				color: #FFFFFF;
		// 				line-height: 14px;
		// 				text-align: left;
		// 				font-style: normal;
		// 			}

		// 			.right {
		// 				font-family: AlibabaPuHuiTi_3_45_Light;
		// 				font-size: 14px;
		// 				color: #FFFFFF;
		// 				line-height: 14px;
		// 				text-align: left;
		// 				font-style: normal;
		// 			}
		// 		}
		// 	}

		// 	.baoming3-bottom {
		// 		position: relative;
		// 		min-height: 51px;
		// 		padding: 10px 20px;
		// 		display: flex;
		// 		box-sizing: border-box;
		// 		flex-direction: column;
		// 		justify-content: center;
		// 		align-items: center;
		// 		font-family: AlibabaPuHuiTi_3_65_Medium;
		// 		font-size: 15px;
		// 		color: #957BFF;
		// 		line-height: 24px;
		// 		font-style: normal;

		// 		.baoming3-bottom-item {
		// 			display: block;
		// 		}

		// 		&:before {
		// 			content: "";
		// 			position: absolute;
		// 			left: 0;
		// 			top: 0;
		// 			right: 0;
		// 			height: 1px;
		// 			background: linear-gradient(90deg, rgba(60, 45, 170, 0.3) 0%, #3C2DAA 50%, rgba(60, 45, 170, 0.3) 100%);
		// 		}
		// 	}
		// }
		
		.baoming3 {
			width: 670rpx;
			background: #1E234B;
			border-radius: 12px;
			margin: 0 auto;
			padding-bottom: 34px;
			position: relative;
			
			.edit {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 14px;
				height: 14px;
				right: 10px;
				bottom: 10px;
			}
		
			.baoming3-top {
				position: relative;
				padding: 30px 0 0 20px;
				
				.baoming3-top-title {
					font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
					font-weight: 400;
					font-size: 9px;
					color: rgba(255, 255, 255, 0.6);
					font-style: normal;
					text-transform: none;
					margin-bottom: 16px;
				}
		
				.img {
					position: absolute;
					right: 20px;
					top: 26px;
					width: 74px;
					height: 74px;
					border-radius: 10px;
					border: 2px solid #fff;
					box-sizing: border-box;
				}
		
				.name {
					font-family: AlibabaPuHuiTi_3_75_SemiBold;
					font-size: 20px;
					color: #FFFFFF;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}
		
				.position {
					margin-top: 16px;
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 13px;
					color: rgba(255, 255, 255, 0.6);
					line-height: 13px;
					text-align: left;
					font-style: normal;
					padding-bottom: 9px;
					position: relative;
		
					&::after {
						content: "";
						position: absolute;
						left: 0;
						bottom: 0;
						width: 20px;
						height: 2px;
						background: #7C5CFF;
					}
				}
			}
		
			.company {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 18px;
				color: #FFFFFF;
				line-height: 16px;
				letter-spacing: 1px;
				text-align: left;
				font-style: normal;
				padding: 0 20px;
				margin: 39px 0 10px;
			}
		
			.list {
				padding-bottom: 6px;
		
				.item {
					width: 590rpx;
					margin: 0 auto;
					display: flex;
					margin-bottom: 14px;
		
					.left {
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 13px;
						color: rgba(255, 255, 255, 0.49);
						line-height: 13px;
						font-style: normal;
						flex: 0 0 64px;
					}
		
					.right {
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 13px;
						color: #FFFFFF;
						line-height: 13px;
						text-align: left;
						font-style: normal;
						display: flex;
						flex-wrap: wrap;
		
						.right-item {
							padding: 0 11px;
							border-radius: 10px;
							height: 18px;
							border: 1px solid rgba(255, 255, 255, 0.28);
							margin: 0 2px 5px 0;
							font-size: 12px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		
		}

		.baoming4 {
			font-family: AlibabaPuHuiTi_3_75_SemiBold;
			font-size: 14px;
			color: #FFFFFF;
			line-height: 14px;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-top: 83px;
		}

		.baoming5 {
			width: 130px;
			height: 32px;
			border-radius: 16px;
			border: 1px solid rgba(255, 255, 255, 0.4);
			padding: 0 2px;
			box-sizing: border-box;
			margin: 13px auto 0;
			display: flex;
			align-items: center;

			.btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 28px;
				border-radius: 14px;
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 11px;
				line-height: 11px;
				font-style: normal;
				background: none;
				color: rgba(255, 255, 255, 0.6);

				&.active {
					color: #7350F5;
					background: #FFFFFF;
				}
			}
		}
	}

	.drawer-top {
		font-family: AlibabaPuHuiTi_3_85_Bold;
		font-size: 20px;
		color: #000000;
		line-height: 20px;
		text-align: center;
		font-style: normal;
		padding: 24px 0 20px;
	}

	.drawer-bottom {
		font-family: AlibabaPuHuiTi_3_55_Regular;
		font-size: 15px;
		color: #000000;
		line-height: 20px;
		text-align: center;
		font-style: normal;
	}

	.btns {
		display: flex;
		justify-content: center;
		margin-top: 24px;

		.btn {
			width: 100px;
			height: 40px;
			background: rgba(30, 35, 75, .1);
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 16px;
			color: #1E234B;
			line-height: 23px;
			text-align: left;
			font-style: normal;
			margin: 0 10px;

			&.on {
				background: #7350F5;
				color: #fff;
			}
		}
	}
</style>